<template>
  <v-md-editor 
    :model-value="safeValue" 
    @update:model-value="handleUpdate"
    v-bind="$attrs"
  />
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  modelValue?: string | null | undefined
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: ''
})

const emit = defineEmits<{
  'update:modelValue': [value: string]
}>()

// 确保传给编辑器的值永远不是null或undefined
const safeValue = computed(() => {
  const value = props.modelValue
  if (value === null || value === undefined) {
    return ''
  }
  return String(value)
})

function handleUpdate(value: string) {
  // 确保输出的值也不是null
  emit('update:modelValue', value || '')
}
</script>

<style scoped>
/* 继承父组件的样式 */
</style>
